<template>
  <div class="container">
    <div class="topTitle topTitleBox">
      <div class="fl">
        <i class="icon iconfont iconfanhui1" @click="goBack"></i>
        <!-- <span class="titleStyle">
                    {{projectName || "--"}}
                </span> -->
        <el-popover
          placement="bottom"
          width="300"
          trigger="hover"
          :content="projectName"
        >
          <span class="titleStyle" slot="reference">
            {{
              projectName.length > 25
                ? projectName.substring(0, 25) + '...'
                : projectName || '--'
            }}
          </span>
        </el-popover>
        <!-- WAIT_APPROVAL("01", "待审核"), REJECTED("02", "已驳回"),RECALL("03", "已撤回"), APPROVAL("04", "已审核"); -->
        <span
          v-if="
            method === 'FUNDDEPOSIT' &&
            (payMethod === 'ALL_NO_PAY' ||
              payMethod === 'PART_PAY' ||
              payMethod === 'WAIT_PAY')
          "
          :class="[
            startStatus,
            {
              greenColor: statusDesc === '已审核',
              grayColor: statusDesc === '已撤回',
              redColor: statusDesc === '已驳回',
              yellowColor: statusDesc === '待审核',
            },
          ]"
          >{{ statusDesc }}</span
        >
        <span
          v-if="
            method === 'BANKGUARANTEE' ||
            method === 'OWNERPOLICY' ||
            method === 'BANKPOLICY'
          "
          :class="[
            startStatus,
            {
              greenColor: statusDesc === '已审核',
              grayColor: statusDesc === '已撤回',
              redColor: statusDesc === '已驳回',
              yellowColor: statusDesc === '待审核',
            },
          ]"
          >{{ statusDesc }}</span
        >
      </div>
      <!-- 资金存入-全额免缴 页面操作按钮 -->
      <div
        class="fr dbType"
        v-if="
          method === 'FUNDDEPOSIT' &&
          (payMethod === 'ALL_NO_PAY' ||
            payMethod === 'PART_PAY' ||
            payMethod === 'WAIT_PAY')
        "
      >
        <!-- 待审核->查看  审核 驳回    已驳回->修改 删除   已审核以及监察添加无需审核“--” 情况->查看 修改 -->
        <template v-if="statusDesc === '待审核'">
          <el-link
            @click="lookEvent()"
            v-if="payMethod === 'WAIT_PAY'"
            style="line-height: 24px; margin-right: 15px"
            >查看缓缴详情</el-link
          >
          <el-button
            @click="toCheckEvent()"
            class="commonBut saveBtn funComBut check"
          >
            <span class="opetareText">审核</span>
          </el-button>
          <el-button
            @click="toRejectEvent()"
            class="commonBut cancelBtn funComBut reject"
          >
            <span class="opetareText">驳回</span>
          </el-button>
        </template>
        <template v-else-if="statusDesc === '已驳回'">
          <el-button
            v-if="isShowUpdate"
            @click="updateEvent()"
            class="commonBut saveBtn funComBut update"
            icon="icon iconfont iconbianji"
          >
            <span class="opetareText">修改</span>
          </el-button>
          <el-button
            v-if="isShowDel"
            @click="delCashDeposit"
            class="commonBut saveBtn funComBut delete"
            icon="icon iconfont iconshanchu"
          >
            <span class="opetareText">删除</span>
          </el-button>
        </template>
        <template v-else-if="statusDesc === '已返回'"> </template>
        <template v-else>
          <el-button
            v-if="isShowUpdate"
            @click="updateEvent()"
            class="commonBut saveBtn funComBut update"
            icon="icon iconfont iconbianji"
          >
            <span class="opetareText">修改</span>
          </el-button>
        </template>
      </div>
      <!-- 银行担保/业主担保/保险担保 页面操作按钮 -->
      <div
        class="fr dbType"
        v-if="
          method === 'BANKGUARANTEE' ||
          method === 'OWNERPOLICY' ||
          method === 'BANKPOLICY'
        "
      >
        <!-- <div class="fr dbType"> -->
        <!-- 待审核->查看  审核 驳回    已驳回->修改 删除   已审核以及监察添加无需审核“--” 情况->查看 修改 -->
        <template v-if="statusDesc === '待审核'">
          <el-button
            @click="toCheckEvent()"
            class="commonBut saveBtn funComBut check"
          >
            <span class="opetareText">审核</span>
          </el-button>
          <el-button
            @click="toRejectEvent()"
            class="commonBut cancelBtn funComBut reject"
          >
            <span class="opetareText">驳回</span>
          </el-button>
        </template>
        <template v-else-if="statusDesc === '已驳回'">
          <el-button
            v-if="isShowUpdate"
            @click="updateEvent()"
            class="commonBut saveBtn funComBut update"
            icon="icon iconfont iconbianji"
          >
            <span class="opetareText">修改</span>
          </el-button>
          <el-button
            v-if="isShowDel"
            @click="delCashDeposit"
            class="commonBut saveBtn funComBut delete"
            icon="icon iconfont iconshanchu"
          >
            <span class="opetareText">删除</span>
          </el-button>
        </template>

        <template v-else>
          <el-button
            v-if="isShowUpdate"
            @click="updateEvent()"
            class="commonBut saveBtn funComBut update"
            icon="icon iconfont iconbianji"
          >
            <span class="opetareText">修改</span>
          </el-button>
        </template>
      </div>
    </div>
    <div class="mainCon" v-if="checked">
      <cashDepositPay
        :depositId="depositId"
        :payMethod="payMethod"
        :isJC="true"
        :method="method"
        :projectId="projectId"
        @func="getmsg(arguments)"
        v-if="
          method === 'FUNDDEPOSIT' &&
          (payMethod === 'ALL_PAY' ||
            payMethod === 'PART_PAY' ||
            payMethod === 'WAIT_PAY')
        "
      ></cashDepositPay>
      <cashDepositFree
        :depositId="depositId"
        :payMethod="payMethod"
        :projectId="projectId"
        v-if="
          showCurrentPage &&
          method === 'FUNDDEPOSIT' &&
          payMethod === 'ALL_NO_PAY'
        "
      ></cashDepositFree>
      <cashDepositGuarantee
        :depositId="depositId"
        :payMethod="payMethod"
        v-if="
          showCurrentPage &&
          (method === 'BANKGUARANTEE' ||
            method === 'OWNERPOLICY' ||
            method === 'BANKPOLICY')
        "
        ref="cashDepositGuarantee"
      ></cashDepositGuarantee
      ><!-- 保证金类型为银行保函、业主保单、保险保单 -->
    </div>
    <!-- 修改保证金记录弹框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="payFormVisible"
      :close-on-click-modal="false"
      @close="closeFormDialog('payFormVisible', 'payForm')"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="640px"
    >
      <el-form
        :model="formData"
        label-width="135px"
        :rules="formRules"
        ref="formData"
        class="payFormXg"
        v-if="showForm"
      >
        <el-form-item label="项目名称：">
          <el-select
            style="display: none"
            ref="projectNameSearch"
            v-model="formData.projectId"
            clearable
            filterable
            placeholder="请输入项目名称进行搜索"
          >
            <el-option
              v-for="(item, index) in projectOptions"
              :key="index"
              :label="item.projectName"
              :value="index"
            ></el-option>
          </el-select>
          <span>{{ projectName || '--' }}</span>
        </el-form-item>
        <el-form-item label="保证金缴纳方式：" prop="method">
          <el-radio-group
            :disabled="isDisabled"
            v-if="isHsUser()"
            v-model="formData.method"
            @change="payTypeChange"
          >
            <el-radio label="FUNDDEPOSIT">资金存入</el-radio>
            <el-radio label="BANKGUARANTEE">银行保函</el-radio>
            <el-radio label="BANKPOLICY">保险保单</el-radio>
          </el-radio-group>
          <el-radio-group
            :disabled="isDisabled"
            v-else
            v-model="formData.method"
            @change="payTypeChange"
          >
            <el-radio label="FUNDDEPOSIT">资金存入</el-radio>
            <el-radio label="BANKGUARANTEE">银行保函</el-radio>
            <el-radio label="OWNERPOLICY">{{
              isXiangYangUser() ? '工程担保公司保函' : '业主担保'
            }}</el-radio>
            <el-radio label="BANKPOLICY">保险保单</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 选择资金存入才显示缴纳形式 -->
        <el-form-item
          label="缴纳形式："
          prop="payMethod"
          v-if="formData.method === 'FUNDDEPOSIT'"
        >
          <el-radio-group
            :disabled="isDisabled"
            v-model="formData.payMethod"
            @change="payTypeChange"
          >
            <el-radio label="ALL_PAY">全额缴纳</el-radio>
            <el-radio label="PART_PAY">部分免缴</el-radio>
            <el-radio label="ALL_NO_PAY">全额免缴</el-radio>
            <el-radio label="WAIT_PAY">缓缴</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="缴纳单位：" prop="reciveunit">
          <el-radio-group v-model="formData.reciveunit" :disabled="lookDetail">
            <el-radio
              v-for="(item, index) in companyOptions"
              :key="index"
              :label="item.companyType"
              >{{ item.companyName }}({{
                item.companyType === '0' ? '建设方' : '施工方'
              }})</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <template
          v-if="
            formData.method === 'FUNDDEPOSIT' &&
            formData.payMethod === 'WAIT_PAY'
          "
        >
          <el-form-item label="缓缴周期：">
            <p v-if="lookDetail">
              <span v-if="operationDate[0] == 'undefined'">--</span
              ><span v-else
                >{{ operationDate[0] }} 至 {{ operationDate[1] }}</span
              >
            </p>
            <el-date-picker
              class="mWidth"
              v-else
              type="daterange"
              placeholder="请选择保证金缓缴日期"
              range-separator="至"
              v-model="operationDate"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="缴纳日期：" prop="operationDate">
            <el-date-picker
              class="mWidth"
              type="date"
              placeholder="请选择保证金缴纳日期"
              v-model="formData.operationDate"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </template>
        <!-- 资金存入-（全额缴纳/部分免缴）存在缴纳银行和缴纳账号信息 -->
        <el-form-item
          label="缴纳银行："
          prop="bankOne"
          v-if="
            formData.method === 'FUNDDEPOSIT' &&
            (formData.payMethod === 'ALL_PAY' ||
              formData.payMethod === 'PART_PAY')
          "
        >
          <el-radio-group
            :disabled="isDisabled"
            v-model="formData.bankOne"
            @change="changeBankName"
          >
            <el-radio
              v-for="(item, index) in bankNameList"
              :key="index"
              :label="item.bankId + ',' + item.account + ',' + item.bankName"
              >{{ item.bankName }}</el-radio
            >
          </el-radio-group>
          <span style="color: red" v-if="noBank">
            <i class="icon iconfont iconshengming"></i>
            该项目所在的区域暂未设置缴纳银行</span
          >
        </el-form-item>
        <el-form-item
          label="缴纳账号："
          prop="depositAccountId"
          v-if="
            formData.method === 'FUNDDEPOSIT' &&
            (formData.payMethod === 'ALL_PAY' ||
              formData.payMethod === 'PART_PAY')
          "
        >
          <span style="color: #606266">{{ formData.account }}</span>
        </el-form-item>
        <el-form-item label="应缴金额：" prop="shouldPay">
          <el-radio-group
            v-model="formDataShouldPay"
            @change="agreeChange()"
            :disabled="lookDetail"
          >
            <el-radio
              v-if="item.depositConfig"
              :label="item.shouldPay + '-' + item.depositConfig.scale"
              :key="index"
              v-for="(item, index) in amountPayableList"
            >
              <span v-if="item.sectionType == 1"
                >{{ item.shouldPay }}元 【
                <span
                  v-for="(items, indexs) in item.depositConfigs"
                  :key="indexs"
                >
                  <span v-if="indexs == 0"
                    >{{ items.max * 10000 }}*{{ items.scale }}%
                    <span v-if="indexs < item.depositConfigs.length - 1"
                      >+</span
                    ></span
                  >
                  <span v-else>
                    <span v-if="item.total&lt;items.max*10000"
                      >({{ item.total }}-{{
                        item.depositConfigs[indexs - 1].max * 10000
                      }})*{{ items.scale }}%
                      <span v-if="indexs < item.depositConfigs.length - 1"
                        >+</span
                      ></span
                    >
                    <span v-else
                      >({{ items.max * 10000 }}-{{ items.min * 10000 }})*{{
                        items.scale
                      }}%
                      <span v-if="indexs < item.depositConfigs.length - 1"
                        >+</span
                      ></span
                    >
                  </span> </span
                >,最高限额{{ item.upperLimit }}元】
              </span>
              <span v-else
                >{{ item.shouldPay }}元({{ item.total }}*{{
                  item.depositConfig.scale
                }}%,最高限额{{ item.depositConfig.upperLimit }}元)</span
              >
            </el-radio>
            <!-- </el-radio-group>
                    <el-radio-group v-else v-model="formDataShouldPay" @change="agreeChange()" :disabled="lookDetail"> -->
            <el-radio
              :label="item.shouldPay + '-' + item.depositConfigs[0].scale"
              :key="index"
              v-for="(item, index) in amountPayableList"
            >
              <span v-if="item.sectionType == 1"
                >{{ item.shouldPay }}元 【
                <span
                  v-for="(items, indexs) in item.depositConfigs"
                  :key="indexs"
                >
                  <span v-if="indexs == 0"
                    >{{ items.max * 10000 }}*{{ items.scale }}%
                    <span v-if="indexs < item.depositConfigs.length - 1"
                      >+</span
                    ></span
                  >
                  <span v-else>
                    <span v-if="item.total&lt;items.max*10000"
                      >({{ item.total }}-{{
                        item.depositConfigs[indexs - 1].max * 10000
                      }})*{{ items.scale }}%
                      <span v-if="indexs < item.depositConfigs.length - 1"
                        >+</span
                      ></span
                    >
                    <span v-else
                      >({{ items.max * 10000 }}-{{ items.min * 10000 }})*{{
                        items.scale
                      }}%
                      <span v-if="indexs < item.depositConfigs.length - 1"
                        >+</span
                      ></span
                    >
                  </span> </span
                >,最高限额{{ item.upperLimit }}元】
              </span>
              <span v-else
                >{{ item.shouldPay }}元({{ item.total }}*{{
                  item.depositConfigs[0].scale
                }}%,最高限额{{ item.depositConfigs[0].upperLimit }}元)</span
              >
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <template
          v-if="
            formData.method === 'BANKGUARANTEE' ||
            formData.method === 'OWNERPOLICY' ||
            formData.method === 'BANKPOLICY'
          "
        >
          <el-form-item label="担保金额：" prop="payTotal">
            <el-input
              style="width: 193px"
              v-model.trim="formData.payTotal"
              placeholder="请输入担保金额"
              ><span slot="append" class="unitMaLf">元</span></el-input
            >
          </el-form-item>
          <el-form-item label="担保机构：" prop="guaranteeName">
            <el-input
              class="mWidth"
              maxlength="200"
              v-model.trim="formData.guaranteeName"
              placeholder="请填写担保机构全称"
            ></el-input>
          </el-form-item>
          <el-form-item label="担保生效日：" prop="guaranteeStartDate">
            <el-date-picker
              class="mWidth"
              type="date"
              placeholder="请选择保函/担保生效的日期"
              v-model="formData.guaranteeStartDate"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="担保到期日：" prop="guaranteeEndDate">
            <el-date-picker
              class="mWidth"
              type="date"
              placeholder="请选择保函/担保到期的日期"
              v-model="formData.guaranteeEndDate"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </template>
        <template
          v-else-if="
            formData.method === 'FUNDDEPOSIT' &&
            formData.payMethod === 'PART_PAY'
          "
        >
          <el-form-item label="减免金额：" prop="reduceMoney">
            <el-input
              class="mWidth"
              @blur.prevent="changeCount()"
              v-model.trim="formData.reduceMoney"
              placeholder="请输入减免金额"
            ></el-input>
            <span class="unitMaLf">元</span>
          </el-form-item>
          <el-form-item label="实缴金额：">
            <span class="shouldTotal greenWord">{{ calculatePayTotal }}元</span>
          </el-form-item>
        </template>
        <template
          v-else-if="
            formData.method === 'FUNDDEPOSIT' &&
            formData.payMethod === 'ALL_NO_PAY'
          "
        >
          <el-form-item label="免缴金额：">
            <span class="shouldTotal greenWord"
              >{{ formData.shouldPay }}元</span
            >
          </el-form-item>
        </template>
        <template
          v-else-if="
            formData.method === 'FUNDDEPOSIT' &&
            formData.payMethod === 'ALL_PAY'
          "
        >
          <el-form-item label="实缴金额：" prop="payTotal">
            <el-input
              style="width: 193px; position: relative"
              v-model.trim="formData.payTotal"
              placeholder="请输入实缴金额"
            ></el-input>
            <span class="unitMaLf greenWord">元</span>
          </el-form-item>
        </template>
        <el-form-item label="业务办理人：" prop="operator">
          <p v-if="lookDetail">{{ formData.operator }}</p>
          <el-input
            v-else
            class="mWidth"
            maxlength="10"
            v-model.trim="formData.operator"
            placeholder="请填写业务实际处理人员姓名"
          ></el-input>
        </el-form-item>
        <template
          v-if="
            formData.method === 'FUNDDEPOSIT' &&
            (formData.payMethod === 'PART_PAY' ||
              formData.payMethod === 'ALL_NO_PAY' ||
              formData.payMethod === 'WAIT_PAY')
          "
        >
          <el-form-item
            :label="
              formData.payMethod === 'PART_PAY'
                ? '减免原因：'
                : formData.payMethod === 'ALL_NO_PAY'
                ? '免缴原因：'
                : '缓缴原因：'
            "
            prop="reduceRemark"
          >
            <p v-if="lookDetail">{{ formData.reduceRemark }}</p>
            <el-input
              class="mWidth"
              :rows="3"
              v-else
              type="textarea"
              v-model.trim="formData.reduceRemark"
              autocomplete="off"
              :placeholder="
                formData.payMethod === 'PART_PAY'
                  ? '请填写保证金减免原因'
                  : formData.payMethod === 'ALL_NO_PAY'
                  ? '请填写保证金免缴原因'
                  : '请填写缓缴原因'
              "
              maxlength="200"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="!lookDetail"
            :label="
              formData.payMethod === 'PART_PAY'
                ? '减免凭证：'
                : formData.payMethod === 'ALL_NO_PAY'
                ? '免缴凭证：'
                : '缓缴凭证：'
            "
            prop="reducePayImg"
          >
            <div class="uploadBoxPay">
              <uploadAnnex
                class="mWidth"
                @getFileList="getFileList"
                :limitationFactor="limitationFactor"
                @getFile="getFile"
                :upLoadFile="upLoadFile"
              />
            </div>
          </el-form-item>
          <el-row v-if="!lookDetail" v-model="formData.contractImgUrl">
            <uploadResult
              style="margin-left: 135px !important"
              :resultList="upLoadFile"
              @callBackResult="getFile"
            />
          </el-row>
          <el-form-item v-if="lookDetail" label="缓缴凭证：">
            <div v-for="(item, index) in upLoadFile" :key="index">
              <i class="el-icon-paperclip links"></i>
              {{ item.name }}
              <div class="previewBox" style="display: inline-block">
                <el-link
                  type="primary"
                  @click="lookResultImg(item.url, item.id)"
                  >查看</el-link
                >
                <el-image
                  class="previewImg"
                  style="width: 56px; height: 0px"
                  :src="src"
                  :preview-src-list="[src]"
                  :id="item.id"
                ></el-image>
              </div>
            </div>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="缴纳原因：" prop="remark">
            <el-input
              type="textarea"
              class="mWidth"
              :rows="3"
              v-model.trim="formData.remark"
              autocomplete="off"
              placeholder="请填写缴纳备注信息"
              maxlength="200"
            ></el-input>
          </el-form-item>
        </template>
        <!--黄石地区 缴纳形式为【银行保函】或【保险保单】 需新增填写寄件信息-->
        <!-- <div v-if="isHsUser()">
                    <el-form-item label="寄件信息" prop="">
                        <p class="formItemTip">企业需要提前将保函或保单快递至劳动监察部门，查看 <el-link @click="downLoadFile('sendFiles')">收件信息</el-link></p>
                        <p class="formItemTip">请在寄件后填写寄件人信息</p>
                    </el-form-item>
                    <el-form-item label="寄件人姓名" prop="institution">
                        <el-input v-model.trim="formData.institution" autocomplete="off" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="branch">
                        <el-input v-model.trim="formData.branch" autocomplete="off" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="快递公司" prop="name">
                        <el-input v-model.trim="formData.name" autocomplete="off" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="快递单号" prop="cardCode">
                        <el-input v-model.trim="formData.cardCode" autocomplete="off" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="寄件凭证" prop="senderFileJson">
                            <uploadAnnex  @getFileList="getExpressFileList" :limitationFactor ="limitationExpress" @getFile="getExpressFile" :upLoadFile ="expressFile"/>
                    </el-form-item>
                    <el-row v-model="formData.senderFileJson">
                        <uploadResult style="margin-left:135px!important;" :resultList="expressFile" @callBackResult='getExpressFile' />
                    </el-row>
                </div> -->
        <!--黄石地区 缴纳形式为【资金存入】，在缴纳凭证字段上方，需新增付款银行账户信息填写表单 -->
        <div v-if="isHsUser() && formData.method === 'FUNDDEPOSIT'">
          <el-form-item label="付款银行账户：" prop="">
            <p class="formItemTip mWidth">
              填写企业付款银行账号，不支持个人账户转账，后期保证金退还将原路退回
            </p>
          </el-form-item>
          <el-form-item label="开户银行：">
            <el-input
              :disabled="lookDetail"
              class="mWidth"
              v-model.trim="formData.institution"
              autocomplete="off"
              placeholder="请输入付款账户开户银行，如工商银行等"
            ></el-input>
          </el-form-item>
          <el-form-item label="支行名称：">
            <el-input
              :disabled="lookDetail"
              class="mWidth"
              v-model.trim="formData.branch"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="账户名称：">
            <el-input
              :disabled="lookDetail"
              class="mWidth"
              v-model.trim="formData.name"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行卡号：">
            <el-input
              :disabled="lookDetail"
              class="mWidth"
              v-model.trim="formData.cardCode"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </div>
        <!--黄石地区 缴纳形式为【银行保函】或【保险保单】 需新增填写寄件信息-->
        <div
          v-if="
            isHsUser() &&
            ['BANKGUARANTEE', 'BANKPOLICY'].includes(formData.method)
          "
        >
          <el-form-item label="寄件信息：" prop="">
            <p class="formItemTip mWidth">
              企业需要提前将保函或保单快递至劳动监察部门，查看
              <el-link @click="downLoadFile('sendFiles')">收件信息</el-link>
            </p>
            <p class="formItemTip">请在寄件后填写寄件人信息</p>
          </el-form-item>
          <el-form-item label="寄件人姓名：">
            <el-input
              v-model.trim="formData.institution"
              class="mWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话：">
            <el-input
              v-model.trim="formData.branch"
              class="mWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递公司：">
            <el-input
              v-model.trim="formData.name"
              class="mWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递单号：">
            <el-input
              v-model.trim="formData.cardCode"
              class="mWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="寄件凭证：">
            <uploadAnnex
              class="mWidth"
              @getFileList="getExpressFileList"
              :limitationFactor="limitationExpress"
              @getFile="getExpressFile"
              :upLoadFile="expressFile"
            />
          </el-form-item>
          <el-row v-model="formData.senderFileJson">
            <uploadResult
              style="margin-left: 135px !important"
              :resultList="expressFile"
              @callBackResult="getExpressFile"
            />
          </el-row>
        </div>
        <!-- 非资金存入及资金存入全额缴纳/部分缴纳有缴纳凭证 -->
        <template
          v-if="
            formData.method !== 'FUNDDEPOSIT' ||
            (formData.method === 'FUNDDEPOSIT' &&
              (formData.payMethod === 'ALL_PAY' ||
                formData.payMethod === 'PART_PAY'))
          "
        >
          <el-form-item
            :label="
              isHsUser() &&
              ['BANKGUARANTEE', 'BANKPOLICY'].includes(formData.method)
                ? '保单保函：'
                : '缴纳凭证：'
            "
            prop="contractImgUrl"
          >
            <uploadAnnex
              class="mWidth"
              @getFileList="getFileListPay"
              :limitationFactor="limitationFactorPay"
              @getFile="getFilePay"
              :upLoadFile="uploadPayFile"
            />
          </el-form-item>
          <el-row v-model="formData.contractImgUrl">
            <uploadResult
              style="margin-left: 135px !important"
              :resultList="uploadPayFile"
              @callBackResult="getFilePay"
            />
          </el-row>
        </template>
        <el-form-item
          v-if="
            isHsUser() &&
            ['BANKGUARANTEE', 'BANKPOLICY'].includes(formData.method)
          "
          label=""
          label-width="135px"
        >
          <el-checkbox v-model="formData.checked"
            >勾选即代表同意
            <el-link @click="downLoadFile('constructionFiles')"
              >施工单位承诺书</el-link
            ></el-checkbox
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          v-if="!lookDetail"
          @click.native="closeFormDialog('payFormVisible', 'formData')"
          >取 消</el-button
        >
        <el-button
          type="primary"
          class="save"
          v-if="lookDetail"
          @click.native="closeFormDialog('payFormVisible', 'formData')"
          >确 定</el-button
        >
        <el-button
          type="primary"
          v-else
          class="save"
          @click.native="saveToDetail('formData', 'payFormVisible')"
          :loading="isSaveLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 驳回申报弹框 -->
    <el-dialog
      title="驳回申报"
      :visible.sync="formVisibleReject"
      :close-on-click-modal="false"
      @close="handleClose"
      custom-class="brand-dialog-min-width"
      width="550px"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="formDataReject"
        label-width="80px"
        :rules="formRulesReject"
        ref="formDataReject"
      >
        <el-form-item label="">
          请核对企业申报的保证金流水信息，如确实有误则将通知企业修改再次申报，本页面隐藏该流水，请谨慎操作
        </el-form-item>
        <el-form-item label="驳回原因" class="row-padding-bottom" prop="reason">
          <el-input
            type="textarea"
            v-model="formDataReject.reason"
            @blur="formDataReject.reason = changeValue($event)"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleClose" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="submitRejectSave"
          v-sdc
          class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改弹窗 -->
    <dialog-bond
      :shows="shows"
      :id="id"
      :itemInfo="itemInfo"
      @closeDialog="closeDialog"
      @successDialog="successDialog"
    />
  </div>
</template>

<script>
// 资金存入---全额缴存/部分免缴/缓缴 页面
import cashDepositPay from '@/components/cashDeposit/cashDepositPay'
// 资金存入---全额免缴  页面
import cashDepositFree from '@/components/cashDeposit/cashDepositFree'
// 银行担保/业主担保/保险担保
import cashDepositGuarantee from '@/components/cashDeposit/cashDepositGuarantee'
import DialogBond from './DialogBond.vue'
import common from '../../kits/common'
export default {
  name: 'cashDepositJcDetail',
  components: {
    cashDepositPay,
    cashDepositFree,
    cashDepositGuarantee,
    DialogBond,
  },
  data() {
    var checkMoney = (rule, value, callback) => {
      if (!value) {
        if (
          this.formData.method === 'BANKGUARANTEE' ||
          this.formData.method === 'OWNERPOLICY' ||
          this.formData.method === 'BANKPOLICY'
        ) {
          return callback(new Error('担保金额不能为空'))
        } else if (
          this.formData.method === 'FUNDDEPOSIT' &&
          this.formData.payMethod === 'ALL_PAY'
        ) {
          return callback(new Error('实缴金额不能为空'))
        }
      } else {
        var rePayTotal =
          /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!rePayTotal.test(value) || value == 0.0 || value == 0.0) {
          callback(new Error('金额格式不正确,必须大于0,最多带有2位小数'))
        } else {
          if (value >= 100000000000) {
            callback(new Error('金额需小于1000亿'))
          } else {
            callback()
          }
        }
      }
    }
    var checkMoneyReduce = (rule, value, callback) => {
      let shouldPay = this.formDataShouldPay.split('-')[0]
      if (!value) {
        return callback(new Error('减免金额不能为空'))
      } else {
        var rePayTotal =
          /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!rePayTotal.test(value) || value == 0.0 || value == 0.0) {
          callback(new Error('金额格式不正确,必须大于0,最多带有2位小数'))
        } else if (!shouldPay) {
          callback(new Error('请先选择应缴金额'))
        } else if (
          shouldPay &&
          (Number(value) > Number(shouldPay) ||
            Number(value) == Number(shouldPay))
        ) {
          callback(new Error('减免金额需小于应缴金额'))
        } else {
          callback()
        }
      }
    }
    var checkShouldPay = (rule, value, callback) => {
      if (!this.formDataShouldPay) {
        return callback(new Error('应缴金额不能为空'))
      } else {
        callback()
      }
    }
    var checkPayDate = (rule, value, callback) => {
      if (!value) {
        if (
          this.formData.method === 'FUNDDEPOSIT' &&
          this.formData.payMethod === 'WAIT_PAY'
        ) {
          return callback(new Error('缓缴日期不能为空'))
        } else {
          return callback(new Error('缴纳日期不能为空'))
        }
      } else {
        callback()
      }
    }
    var checkDate = (rule, value, callback) => {
      var guaranteeStartDate = this.formData.guaranteeStartDate
      var guaranteeEndDate = this.formData.guaranteeEndDate
      if (!guaranteeEndDate) {
        return callback(new Error('保函/担保到期的日期不能为空'))
      } else if (guaranteeStartDate > guaranteeEndDate) {
        return callback(new Error('担保到期日不能小于担保生效日'))
      } else {
        callback()
      }
    }
    //缴纳凭证验证

    var checkPayUploadFile = (rule, value, callback) => {
      if (this.uploadPayFile.length === 0) {
        if (
          this.isHsUser() &&
          ['BANKGUARANTEE', 'BANKPOLICY'].includes(this.formData.method)
        ) {
          return callback(new Error('保单保函不能为空'))
        } else {
          return callback(new Error('缴纳凭证不能为空'))
        }
      } else {
        callback()
      }
    }
    var checkReason = (rule, value, callback) => {
      if (!value && this.formData.method === 'FUNDDEPOSIT') {
        if (this.formData.payMethod === 'PART_PAY') {
          return callback(new Error('减免原因不能为空'))
        } else if (this.formData.payMethod === 'ALL_NO_PAY') {
          return callback(new Error('免缴原因不能为空'))
        } else if (this.formData.payMethod === 'WAIT_PAY') {
          return callback(new Error('缓缴原因不能为空'))
        }
      } else {
        callback()
      }
    }
    var checkUploadFileReduce = (rule, value, callback) => {
      if (this.upLoadFile.length === 0) {
        if (this.formData.method === 'FUNDDEPOSIT') {
          if (this.formData.payMethod === 'PART_PAY') {
            return callback(new Error('减免凭证不能为空'))
          } else if (this.formData.payMethod === 'ALL_NO_PAY') {
            return callback(new Error('免缴凭证不能为空'))
          } else if (this.formData.payMethod === 'WAIT_PAY') {
            return callback(new Error('缓缴凭证不能为空'))
          }
        }
      } else {
        callback()
      }
    }
    var checkExpressFile = (rule, value, callback) => {
      if (this.expressFile.length === 0) {
        return callback(new Error('寄件凭证不能为空'))
      } else {
        callback()
      }
    }
    return {
      dialogTitle: '修改缴纳记录',
      lookDetail: false,
      src: '',
      method: '', //缴纳方式
      payMethod: '', //缴纳形式
      statusDesc: '',
      formDataShouldPay: '',
      projectId: '',
      projectName: '',
      //表格数据
      projects: [],
      startStatus: 'startStatus', //状态样式
      isDisabled: true, //缴纳形式，缴纳方式，银行 监察不可修改
      projectStatus: '', //开工状态
      method: '', //缴纳方式
      payMethod: '', //缴纳形式
      emptyBox: false, //空数据页面
      showEmployeeList: true,
      projectOptions: [], //项目名称下拉框
      companyOptions: [], //缴纳单位
      bankNameList: [],
      calculatePayTotal: '', //部分免缴计算的实缴
      formData: {
        projectName: '',
        projectJson: '',
        projectId: '', //项目名称
        method: 'FUNDDEPOSIT', //缴纳方式
        payMethod: 'ALL_PAY', //缴纳形式
        reciveunit: '', //缴纳单位
        operationDate: '', //缴纳日期
        guaranteeStartDate: '', //担保生效日
        guaranteeEndDate: '', //担保到期日
        bankOne: '', //缴纳银行
        bankName: '',
        account: '通过选择银行带入', //缴纳账号
        shouldPay: '', //应缴金额
        total: '', //工程造价
        scale: '', //工程造价比例
        upperLimit: '', //最高限额
        reduceMoney: '', //减免金额
        payTotal: '', //实缴金额
        guaranteeName: '', //担保机构
        operator: '', //业务办理人
        remark: '', //缴纳原因
        reduceRemark: '', //减免原因
        contractImgUrl: [], //合同附件
      },
      noBank: false,
      upLoadFile: [], //附件
      cardFile: [],
      srcList: [],
      oldSrcList: [],
      uploadPayFile: [],
      paySrcList: [],
      oldPaySrcList: [],
      //验证
      formRules: {
        method: [
          {
            required: true,
            message: '请选择缴纳方式',
            trigger: ['blur', 'change'],
          },
        ],
        payMethod: [
          {
            required: true,
            message: '请选择缴纳形式',
            trigger: ['blur', 'change'],
          },
        ],
        reciveunit: [
          {
            required: true,
            message: '请选择缴纳单位',
            trigger: 'change',
          },
        ],
        operationDate: [
          {
            required: true,
            // message: "日期不能为空",
            validator: checkPayDate,
            trigger: 'change',
          },
        ],
        bankOne: [
          {
            required: true,
            message: '请选择缴纳银行',
            trigger: 'change',
          },
        ],
        operator: [
          {
            // pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '只能输入汉字',
            trigger: 'blur',
          },
        ],
        reduceMoney: [
          {
            required: true,
            validator: checkMoneyReduce,
            // message: "减免金额不能为空",
            trigger: 'blur',
          },
        ],
        payTotal: [
          {
            required: true,
            validator: checkMoney,
            trigger: 'blur',
          },
        ],
        shouldPay: [
          {
            required: true,
            validator: checkShouldPay,
            // message: "应缴金额不能为空",
            trigger: 'blur',
          },
        ],
        guaranteeName: [
          {
            required: true,
            message: '担保机构不能为空',
            trigger: 'blur',
          },
        ],
        guaranteeStartDate: [
          {
            required: true,
            message: '保函/担保生效的日期不能为空',
            trigger: 'change',
          },
        ],
        guaranteeEndDate: [
          {
            required: true,
            validator: checkDate,
            // message: "保函/担保到期的日期不能为空",
            trigger: 'change',
          },
        ],
        reduceRemark: [
          {
            required: true,
            // message: "原因不能为空",
            validator: checkReason,
            trigger: 'blur',
          },
        ],
        reducePayImg: [
          {
            required: true,
            validator: checkUploadFileReduce,
            trigger: 'change',
          },
        ],
        contractImgUrl: [
          {
            required: true,
            // message: "缴纳凭证不能为空",
            validator: checkPayUploadFile,
            trigger: 'change',
          },
        ],
      },
      isSaveLoading: false, // 保存loading
      total: 0,
      showForm: true, //重新渲染表单，避免验证问题
      loginType: '',
      formVisibleReject: false, //驳回申报弹框
      depositAccassId: '', //流水id
      formDataReject: {
        reason: '',
      },
      formRulesReject: {
        reason: [
          {
            required: true,
            message: '请输入驳回原因',
            trigger: 'change',
          },
        ],
      },
      showCurrentPage: true,
      isShowUpdate: '',
      amountPayableList: [],
      isShowDel: '',
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip: '', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      limitationFactorPay: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel1', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm1', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip: '', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      operationDate: [],
      checked: true,

      checkExpressFile,
      expressFile: [],
      expressSrcList: [],
      oldExpressSrcList: [],
      limitationExpress: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel2', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm2', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上寄件凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      shows: false,
      id: '',
      shows: false,
      itemInfo: {},
    }
  },
  created() {
    this.method = this.$route.query.method
    this.payMethod = this.$route.query.payMethod
    // this.statusDesc = this.$route.query.statusDesc;

    this.projectId = this.$route.query.projectId
    this.depositId = this.$route.query.depositId
    this.loadDetail(this.$route.query.depositId)
    this.projectName = this.$route.query.projectName
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('mDepositList:update') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('mDepositList:delete') > -1
    this.showFileText()
  },
  methods: {
    //放大图片id 唯一，不然放大有问题
    lookResultImg(url, id) {
      this.src = url
      setTimeout(() => {
        $('#' + id).click()
      }, 300)
    },
    downLoadFile(type) {
      this.axios({
        method: 'post',
        url: 'api-p/deposit/expand/findurl',
        data: {
          type: type,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              window.open(response.data.result.url)
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg,
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getExpressFileList(val) {
      this.expressSrcList.push(val)
      this.oldExpressSrcList.push(val)
    },

    getExpressFile(val) {
      this.expressFile = val
    },
    goBack() {
      this.$router.push('/home/cashDeposit/cashDepositListJC')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositListJC',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 应缴金额选择
     */
    agreeChange() {
      this.changeCount()
      this.formData.shouldPay = this.formDataShouldPay.split('-')[0]
    },
    delCashDeposit() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/delete',
        data: {
          projectId: this.projectId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$nextTick(() => {
                this.$router.push({
                  path: '/home/cashDeposit/cashDepositListJC',
                })
                this.$store.commit('CHANGE_SLIDER_NAME', {
                  oldUrl: '/home/cashDeposit/cashDepositListJC',
                  newUrl: this.$router.currentRoute.fullPath,
                })
              })
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //修改
    updateEvent() {
      // this.payFormVisible = true;
      // this.dialogTitle = '修改缴纳记录'
      // this.lookDetail = false
      //避免打开弹框存在验证问题
      // this.$nextTick(()=> {
      //     this.$refs["formData"].clearValidate();
      // });
      this.getProjectList()
    },
    // 监察端缓缴的时候 查询缓缴详情
    lookEvent() {
      this.payFormVisible = true
      this.dialogTitle = '查看缓缴记录'
      this.lookDetail = true
      this.getProjectList()
    },
    //关闭弹框
    closeFormDialog() {
      this.showCurrentPage = false
      this.$nextTick(function () {
        this.showCurrentPage = true
        this.payFormVisible = false
      })
    },
    closeDialog() {
      this.shows = false
      this.id = ''
      this.itemInfo = {}
    },
    successDialog() {
      this.shows = false
      this.id = ''
      this.itemInfo = {}
      this.loadDetail(this.$route.query.depositId)
      this.$refs.cashDepositGuarantee.loadDetail()
    },
    getProjectList() {
      // 打开弹框清空，避免一直添加数组
      // this.companyOptions = [];
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/list',
        data: {
          pageNo: 1,
          pageSize: 20,
          projectId: this.projectId,
          projectName: this.projectName,
          isSa: '',
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var item = response.data.result.results[0]
            this.shows = true
            this.id = this.depositId
            this.itemInfo = item
            // this.projectOptions = response.data.result.results;
            // this.total = response.data.result.total;
            // this.$nextTick(() => {
            //     var currentObj = this.projectOptions[0];
            //     this.formData.projectJson = currentObj;
            //     if (currentObj) {
            //         this.companyOptions.push(
            //             {
            //                 companyName: currentObj.pcName,
            //                 companyType: "0"//建设方
            //             },
            //             {
            //                 companyName: currentObj.pbName,
            //                 companyType: "5"//施工方
            //             }
            //         );
            //         this.getBankNameList(currentObj.areaId);
            //         this.getCountShould(
            //             currentObj.areaId,
            //             currentObj.total,
            //             this.method
            //         );
            //          //缴纳修改初始化数据
            //         this.getCashDepositInfo();
            //     }
            // });
          }
        })
        .catch((error) => {})
    },
    getCountShould(areaId, total, depositType) {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/countshould',
        data: {
          areaId: areaId,
          total: total,
          depositType: depositType,
        },
      })
        .then((response) => {
          var data = response.data
          if (!data.hasError) {
            var result = response.data.result
            this.amountPayableList = response.data.result
            this.formData.shouldPay = result.shouldPay || '0'
            this.formData.total = result.total || '0'
            this.formData.scale = result.depositConfig.scale || '0'
            this.formData.upperLimit = result.depositConfig.upperLimit || '0'
          }
        })
        .catch((error) => {})
    },
    getBankNameList(areaId) {
      this.axios({
        method: 'post',
        url: 'api-d/account/expand/finddprobank',
        data: {
          areaId: areaId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            if (data.length > 0) {
              this.noBank = false
              this.bankNameList = data
            } else {
              this.noBank = true
            }
          }
        })
        .catch((error) => {})
    },
    getCashDepositInfo() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/detail',
        data: {
          id: this.depositId,
        },
      })
        .then((response) => {
          var data = response.data.result
          console.log(data)
          this.formDataShouldPay = data.shouldPayTotalReal + '-' + data.payScale
          this.formData.projectName = data.projectName
          this.formData.companyName = data.companyName
          this.formData.reciveunit = data.companyType
          this.formData.operationDate = data.operationDate
          if (data.payMethod == 'WAIT_PAY') {
            let obj = data.waitPayCycle.split('至')
            this.operationDate = [obj[0], obj[1]]
          }
          this.formData.method = data.method
          this.formData.payMethod = data.payMethod
          this.formData.bankOne =
            data.bankId + ',' + data.account + ',' + data.bankName
          //相当于点击按钮赋值
          this.changeBankName(this.formData.bankOne)
          this.formData.reduceMoney = data.exemptionAccount
          this.formData.shouldPayTotal = data.shouldPayTotal || '0'
          this.formData.projectTotal = data.projectTotal || '0'
          this.calculatePayTotal = data.payTotalReal || '0'
          this.formData.payTotal = data.payTotalReal || '0'
          this.formData.upperLimit = data.upperLimit || '0'
          this.formData.payScale = data.payScale || '0'
          this.formData.guaranteeName = data.guaranteeName
          this.formData.guaranteeStartDate = data.guaranteeStartDate
          this.formData.guaranteeEndDate = data.guaranteeEndDate
          this.formData.operator = data.operator
          this.formData.remark = data.remark
          this.formData.reduceRemark = data.remark
          this.formData.account = data.account
          this.formData.bankId = data.bankId
          this.formData.bankName = data.bankName

          //状态标志图片
          this.status = data.status
          //解决表单业务办理人等验证问题
          this.payTypeChange()
          //全额免缴
          if (
            this.method === 'FUNDDEPOSIT' &&
            (this.payMethod === 'ALL_NO_PAY' ||
              this.payMethod === 'WAIT_PAY' ||
              this.payMethod == 'PART_PAY')
          ) {
            this.upLoadFile = data.file
            console.log('111')
            for (var i = 0; i < this.upLoadFile.length; i++) {
              this.srcList.push(this.upLoadFile[i].url)
              this.oldSrcList.push(this.upLoadFile[i].url)
            }
          } else {
            // console.log("0000")
            this.uploadPayFile = data.file
            for (var i = 0; i < this.uploadPayFile.length; i++) {
              this.paySrcList.push(this.uploadPayFile[i].url)
              this.oldPaySrcList.push(this.uploadPayFile[i].url)
            }
          }
          // this.uploadPayFile = data.file;
          //     for (var i = 0; i < this.uploadPayFile.length; i++) {
          //         this.paySrcList.push(this.uploadPayFile[i].url);
          //         this.oldPaySrcList.push(this.uploadPayFile[i].url);
          //     }
          // 黄石地区
          if (this.isHsUser()) {
            if (data.method !== 'FUNDDEPOSIT') {
              this.$set(this.formData, 'institution', data.institution)
              this.$set(this.formData, 'branch', data.branch)
              this.$set(this.formData, 'name', data.name)
              this.$set(this.formData, 'cardCode', data.cardCode)
              this.$set(this.formData, 'senderFileJson', data.senderFile)
              this.expressFile = data.senderFile
              this.$set(this.formData, 'checked', data.isConfirm ? true : false)
              this.$set(this.formRules, 'senderFileJson', [
                {
                  required: true,
                  validator: this.checkExpressFile,
                  trigger: 'change',
                },
              ])
              this.$set(this.formRules, 'institution', [
                {
                  required: true,
                  message: '请输入寄件人姓名',
                  trigger: 'blur',
                },
                {
                  required: true,
                  min: 1,
                  max: 20,
                  message: '支持输入1-20个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'branch', [
                {
                  required: true,
                  message: '请输入寄件人电话',
                  trigger: 'blur',
                },
                {
                  required: true,
                  pattern: /^[\d\-\(\)\ ]{7,11}$/,
                  message: '只能输入7-11位数字',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'name', [
                { required: true, message: '请输入快递公司', trigger: 'blur' },
                {
                  required: true,
                  min: 1,
                  max: 10,
                  message: '支持输入1-10个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'cardCode', [
                { required: true, message: '请输入快递单号', trigger: 'blur' },
                {
                  required: true,
                  min: 1,
                  max: 30,
                  message: '支持输入1-30个字符',
                  trigger: 'blur',
                },
              ])
            } else if (data.method == 'FUNDDEPOSIT') {
              this.expressFile = []
              this.$set(this.formData, 'institution', data.institution)
              this.$set(this.formData, 'branch', data.branch)
              this.$set(this.formData, 'name', data.name)
              this.$set(this.formData, 'cardCode', data.cardCode)
              this.$set(this.formRules, 'institution', [
                { required: true, message: '请输入开户银行', trigger: 'blur' },
                {
                  required: true,
                  min: 1,
                  max: 10,
                  message: '支持输入1-10个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'branch', [
                { required: true, message: '请输入支行名称', trigger: 'blur' },
                {
                  required: true,
                  min: 1,
                  max: 30,
                  message: '支持输入1-30个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'name', [
                { required: true, message: '请输入账户名称', trigger: 'blur' },
                {
                  required: true,
                  min: 1,
                  max: 30,
                  message: '支持输入1-30个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'cardCode', [
                { required: true, message: '请输入银行卡号', trigger: 'blur' },
                {
                  required: true,
                  pattern: /^[\d\-\(\)\ ]{7,30}$/,
                  message: '只能输入7-30位数字',
                  trigger: 'blur',
                },
              ])
            }
          }
        })
        .catch((error) => {})
    },
    changeBankName(val) {
      // 获取选中的银行卡号
      var bankOne = val.split(',')
      this.formData.bankId = bankOne[0]
      this.formData.account = bankOne[1]
      this.formData.bankName = bankOne[2]
    },
    payTypeChange() {
      this.showForm = false
      //详情初始化为保单类型切换时候
      if (!this.formData.payMethod) {
        this.formData.payMethod = 'ALL_PAY'
      }
      // 重置验证不重置表单内容
      this.$nextTick(() => {
        this.showForm = true
        // this.$refs.formData.clearValidate();
      })
    },
    submitFormUptate(params) {
      //资金存入
      var fundDeposit = this.formData.method === 'FUNDDEPOSIT'
      var allPay = this.formData.payMethod === 'ALL_PAY'
      var partPay = this.formData.payMethod === 'PART_PAY'
      var allNoPay = this.formData.payMethod === 'ALL_NO_PAY'
      var waitPay = this.formData.payMethod === 'WAIT_PAY'
      var fileJson, exemptionAccount, payTotal
      if (fundDeposit && (partPay || allNoPay || waitPay)) {
        fileJson = JSON.stringify(this.upLoadFile)
      } else {
        fileJson = JSON.stringify(this.uploadPayFile)
      }
      // 减免金额和全额免缴 都传 exemptionAccount
      if (fundDeposit && partPay) {
        exemptionAccount = this.formData.reduceMoney
      } else if (fundDeposit && allNoPay) {
        exemptionAccount = this.formData.shouldPay
      } else {
        exemptionAccount = ''
      }
      //1.全额免缴和缓缴没有实缴金额   2.部分免缴中 实缴由计算得出
      if (fundDeposit && allNoPay) {
        payTotal = ''
      } else if (fundDeposit && partPay) {
        payTotal = this.calculatePayTotal
      } else {
        payTotal = this.formData.payTotal
      }
      var data = {
        id: this.depositId, //保证金id
        projectJson: JSON.stringify(this.formData.projectJson),
        companyType: this.formData.reciveunit,
        method: this.formData.method,
        // 资金存入-缴纳形式
        payMethod: fundDeposit ? this.formData.payMethod : '',
        operationDateString: this.formData.operationDate,
        // 资金存入-（全额缴纳/部分免缴）存在缴纳银行和缴纳账号信息
        bankId:
          fundDeposit && (allPay || partPay || waitPay)
            ? this.formData.bankId
            : '',
        bankName:
          fundDeposit && (allPay || partPay || waitPay)
            ? this.formData.bankName
            : '',
        account:
          fundDeposit && (allPay || partPay || waitPay)
            ? this.formData.account
            : '',
        // shouldPayTotal: this.formData.shouldPay,
        // payScale: this.formData.scale, //后台新增字段
        shouldPayTotal: this.formDataShouldPay.split('-')[0],
        payScale: this.formDataShouldPay.split('-')[1], //后台新增字段
        // 全额免缴和缓缴没有实缴金额
        payTotal: payTotal, //实缴金额
        exemptionAccount: exemptionAccount,
        //非资金存入 担保机构，担保生效日，担保失效日
        guaranteeName: fundDeposit ? '' : this.formData.guaranteeName,
        guaranteeStartDateString: fundDeposit
          ? ''
          : this.formData.guaranteeStartDate,
        guaranteeEndDateString: fundDeposit
          ? ''
          : this.formData.guaranteeEndDate,
        operator: this.formData.operator,
        //部分免缴，全额免缴，缓缴 原因为必填项
        remark:
          fundDeposit && (partPay || allNoPay || waitPay)
            ? this.formData.reduceRemark
            : this.formData.remark,
        // 部分免缴的    缴纳凭证用noAllPayFileJson  其他凭证名字都用fileJson
        //减免凭证，缓缴凭证，缓缴凭证
        noAllPayFileJson:
          (fundDeposit && partPay) || allNoPay || waitPay
            ? JSON.stringify(this.uploadPayFile)
            : [],
        //缴纳凭证
        // 非资金存入及资金存入全额缴纳/部分缴纳有缴纳凭证
        fileJson: fileJson,
      }
      if (waitPay) {
        data.waitPayCycle = this.operationDate[0]
          ? this.operationDate[0]
          : '' + '至' + this.operationDate[1]
          ? this.operationDate[1]
          : ''
      }
      // 黄石地区 添加另外的4个参数
      if (this.isHsUser()) {
        data.institution = this.formData.institution
        data.branch = this.formData.branch
        data.name = this.formData.name
        data.cardCode = this.formData.cardCode

        if (['BANKGUARANTEE', 'BANKPOLICY'].includes(this.formData.method)) {
          data.senderFileJson = JSON.stringify(this.expressFile)
          data.isConfirm = this.formData.checked ? 1 : 0
        }
      }
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/eidtdeposit',
        data: data,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '修改成功',
              type: 'success',
            })
            // 刷新子路由页面数据
            this.showCurrentPage = false
            this.checked = false
            setTimeout(() => {
              this.checked = true
            }, 50)
            this.getCashDepositInfo()
            this.$nextTick(function () {
              this.showCurrentPage = true
              this.payFormVisible = false
              //重新加载详情更新页面状态按钮
              this.loadDetail(this.depositId)
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    //保存跳转到详情
    saveToDetail() {
      this.$refs.formData.validate((valid) => {
        if (this.isHsUser()) {
          if (
            ['BANKGUARANTEE', 'BANKPOLICY'].includes(this.formData.method) &&
            !this.formData.checked
          ) {
            this.$message({
              type: 'warning',
              message: '请先同意施工单位承诺书',
            })
            return false
          }
        }
        if (valid) {
          this.isSaveLoading = true
          this.submitFormUptate()
        } else {
          return false
        }
      })
    },
    fileChange(type) {
      var Filedata
      var file
      var fileSize
      if (type == '1') {
        Filedata = $('#salaryExcel').val()
      } else {
        Filedata = $('#salaryExcelPay').val()
      }
      if (!Filedata) {
        return
      }
      try {
        if (type == '1') {
          file = $('#salaryExcel')[0].files[0]
        } else {
          file = $('#salaryExcelPay')[0].files[0]
        }
        fileSize = (file.size / 1024).toFixed(0)
      } catch (e) {
        this.$message({
          message:
            '您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过5M，建议使用FireFox、Chrome或IE10以上浏览器。',
          type: 'warning',
        })
      }
      // 文件大小和限制类型可以通过子组件传值区分，若不适应于使用页面，可自行判断
      if (type == '1') {
        if (this.upLoadFile.length == 5) {
          this.$message({
            message: '最多上传5个附件',
            type: 'warning',
          })
          $('#salaryExcel').val('')
          return
        }
      } else {
        if (this.uploadPayFile.length == 5) {
          this.$message({
            message: '最多上传5个附件',
            type: 'warning',
          })
          $('#salaryExcelPay').val('')
          return
        }
      }
      if (fileSize / 1 > 1024 * 2) {
        this.$message({
          // message: "最多能上传2M以内的图片",
          message: '要求格式为JPG、PNG格式，图片大小不超过2M',
          type: 'warning',
        })
        return
      }
      if (!/\.(png|jpg|jpeg|PNG|JPG|JPEG)$/.test(Filedata)) {
        this.$message({
          // message: "仅支持上传png、jpg、jpeg格式文件",
          message: '要求格式为JPG、PNG格式，图片大小不超过2M',
          type: 'warning',
        })
        return
      }
      let that = this
      var options = {
        url: common.uploadUrl + 'api-f/files/upload',
        type: 'POST',
        dataType: 'json',
        success: function (data) {
          if (type == '1') {
            that.upLoadFile.push(data)
            that.srcList.push(data.url)
            that.oldSrcList.push(data.url)
            $('#salaryExcel').val('')
          } else {
            that.uploadPayFile.push(data)
            that.paySrcList.push(data.url)
            that.oldPaySrcList.push(data.url)
            $('#salaryExcelPay').val('')
          }
        },
        error: function () {},
      }
      if (type == '1') {
        $('#salaryExcelForm').ajaxSubmit(options)
      } else {
        $('#filePayForm').ajaxSubmit(options)
      }
      return false
    },
    //计算部分免缴中的实缴金额
    changeCount() {
      let shouldPay = this.formDataShouldPay.split('-')[0]
      if (this.formData.reduceMoney > 0 && shouldPay) {
        this.axios({
          method: 'post',
          url: 'api-d/deposit/expand/calculaccount',
          data: {
            shouldPay: shouldPay,
            exemptionAccount: this.formData.reduceMoney,
          },
        })
          .then((response) => {
            if (!response.data.hasError) {
              this.calculatePayTotal = response.data.result.payTotal
            } else {
              this.$message({
                type: 'error',
                message: response.data.errorMsg,
              })
            }
          })
          .catch((error) => {})
      } else {
        this.calculatePayTotal = ''
      }
    },
    //监察审核
    toCheckEvent(id, type) {
      this.$confirm(
        '请核对企业申报的保证金流水信息，如无误则无法删除，仅可修改，请谨慎操作',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.checkRequset(id)
        })
        .catch(() => {
          //取消
        })
    },
    checkRequset(id) {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/depositapproval',
        data: {
          depositId: this.depositId, //保证金id
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.$message({
              message: '审核通过',
              type: 'success',
            })
            this.checked = false
            setTimeout(() => {
              this.checked = true
            }, 50)
            //重新加载详情更新页面状态按钮
            this.loadDetail(this.depositId)
            this.getCashDepositInfo()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },
    //监察驳回
    toRejectEvent(id, type) {
      this.depositAccassId = id
      this.formVisibleReject = true
    },
    //驳回保存
    submitRejectSave() {
      this.$refs.formDataReject.validate((valid) => {
        if (valid) {
          this.rejectRequset()
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.formVisibleReject = false
      this.$refs['formDataReject'].resetFields()
    },
    rejectRequset(id) {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/depositrecall',
        data: {
          depositAccassId: this.depositAccassId, //流水id
          depositId: this.depositId, //保证金id
          rejectionReason: this.formDataReject.reason,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.$message({
              message: '驳回成功',
              type: 'success',
            })
            this.formVisibleReject = false
            //驳回成功当前缴纳记录跳监察列表
            this.$nextTick(() => {
              this.$router.push('/home/cashDeposit/cashDepositListJC')
              this.$store.commit('CHANGE_SLIDER_NAME', {
                oldUrl: '/home/cashDeposit/cashDepositListJC',
                newUrl: this.$router.currentRoute.fullPath,
              })
            })
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },
    loadDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/detail',
        data: {
          id,
        },
      })
        .then((response) => {
          this.statusDesc =
            response.data.result.statusDesc == '已返回'
              ? response.data.result.statusDesc
              : response.data.result.approvalStatusDesc
        })
        .catch((error) => {})
    },
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    getFile(val) {
      this.upLoadFile = val
    },
    getFileListPay(val) {
      this.paySrcList.push(val)
      this.oldPaySrcList.push(val)
    },
    getFilePay(val) {
      this.uploadPayFile = val
    },
    showFileText() {
      if (this.method == 'FUNDDEPOSIT') {
        this.limitationFactorPay.methodTip =
          '请上传缴款回执单，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      } else if (this.method == 'BANKGUARANTEE') {
        this.limitationFactorPay.methodTip =
          '请上传银行保函单，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      } else if (this.method == 'OWNERPOLICY') {
        this.limitationFactorPay.methodTip =
          '请上传业主担保单，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      } else {
        this.limitationFactorPay.methodTip =
          '请上传保险保单，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      }
      if (this.payMethod == 'PART_PAY') {
        this.limitationFactor.methodTip =
          '请上传减免凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      } else if (this.payMethod == 'ALL_NO_PAY') {
        this.limitationFactor.methodTip =
          '请上传免缴凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      } else if (this.payMethod == 'WAIT_PAY') {
        this.limitationFactor.methodTip =
          '请上传缓缴凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      }
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  // padding: 24px;
  .topTitle {
    height: 50px;
    // background-color: #e4ebf1;
    padding-left: 24px;
    padding-right: 24px;
    // font: bold 18px/67px Microsoft YaHei;
    font-weight: bold;
    font-size: 18px;
    line-height: 50px;
    .titleStyle {
      color: #333;
      font-size: 22px;
      .el-icon-caret-bottom {
        color: #71818e;
      }
    }
    .startStatus {
      display: inline-block;
      width: 60px;
      height: 20px;
      line-height: 20px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      margin-top: 14px;
    }
    .greenColor {
      background: #009588;
    }
    .grayColor {
      background: #657282;
    }
    .yellowColor {
      background: #ffc100;
    }
    .redColor {
      background: #d9544f;
    }
    /deep/ .dbType {
      .check,
      .reject {
        padding: 0 30px;
      }
      .update {
        // margin-right: 24px;
      }
      .reject {
        // background: #DB534B;
        // border-color: #DB534B;
        margin-left: 24px;
      }
      .delete {
        // background: #3e5265;
        // border-color: #3e5265;
        // margin-left: -14px;
        // margin-right: 24px;
        margin-left: 24px;
      }
    }
  }
  .topTitleBox {
    width: 100%;
    height: 50px;
    position: relative;
    &:after {
      content: '';
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 10;
    }
  }
  .mainCon {
    padding-top: 0;
    height: calc(100% - 67px);
  }
  //缴纳凭证附件样式
  .ratioWidth {
    width: 340px;
  }
  .greenWord {
    color: #009588;
    font-weight: bold;
  }
  .payFormXg .uploadBoxPay {
    position: relative;
    .uploadImg {
      width: 96px;
      height: 40px;
      color: #009588;
      border: 1px solid #009588;
      cursor: pointer;
    }
    .uploadImgState {
      font-size: 14px;
      color: #999999;
      margin-left: 12px;
      opacity: 1;
    }
    .upLoadDom {
      position: absolute;
      width: 96px;
      height: 40px;
      top: 0;
      left: 0;
      opacity: 0;
      line-height: 0px;
      form {
        input {
          width: 96px;
          height: 40px;
          line-height: 0px;
          cursor: pointer;
        }
      }
    }
  }
  .imgStyle {
    padding-left: 120px;
    li {
      position: relative;
      margin-right: 20px;
      // margin-top: 10px;
      i {
        position: absolute;
        right: -6px;
        top: -10px;
        font-size: 20px;
      }
    }
  }
}
.formItemTip {
  line-height: 20px;
  padding: 8px 0;
}
</style>
